import type { ReactNode } from 'react';
import React, { useState, useCallback, useEffect, useMemo } from 'react';
import SmartModal from '@/components/smartmodal';
import { tr } from '@/components/common/formatmessage';
import View from './View';
import { MODAL_HEADER_HEIGHT, BLOCK_HEADER_HEIGHT, MODAL_PADDING_HEIGHT, MODAL_FOOTER_HEIGHT } from '@/utils/utils';

export interface ModalViewProps {
  title?: string | ReactNode;
  visible: boolean;
  confirmLoading?: boolean;
  onCancel?: () => void;
  onOk?: (selectedRowKeys: string[], selectedRows: object[], cb: Function) => void;
  [propName: string]: any;
}

function ModalView(props: ModalViewProps) {
  const {
    viewKey,
    wrapClassName,
    title,
    visible,
    zIndex,
    minHeight,
    minWidth,
    itemState,
    value,
    dataSource,
    multiple,
    valueProp,
    labelProp,
    confirmLoading,
    footerLeftExtra,
    footerRightExtra,
    disabled,
    showHeader = true,
    gridHeaderProps,
    onModalVisibleChange,
    okText,
    cancelText,
    onOk,
    onCancel,
    rowSelection,
    extraModalProps,
    ...restProps
  } = props;

  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const [selectedRows, setSelectedRows] = useState([]);
  const [modalHei, setModalHei] = useState(0);
  const [searchFormHei, setSearchFormHei] = useState(0);

  //回填value值
  const setDefaultValue = useCallback(() => {
    const val = value && value.length ? value : [];
    setSelectedRowKeys(val);
  }, [value, dataSource]);

  const handleSelect = useCallback((selectedRowKeys, selectedRows) => {
    setSelectedRowKeys(selectedRowKeys);
    setSelectedRows(selectedRows);
  }, []);

  const onCellEditingChange = useCallback(
    (record: any, filedName: string, newValue: any, oldValue: any) => {
      setSelectedRows([record]);
      return record;
    },
    [selectedRows],
  );

  const onClearSelect = useCallback(() => {
    setSelectedRows([]);
    setSelectedRowKeys([]);
  }, []);

  //点击确定回调
  const handlerOk = useCallback(() => {
    onOk && onOk(selectedRowKeys, selectedRows, onClearSelect);
  }, [selectedRowKeys, selectedRows, onOk]);

  //点击取消回调
  const handlerCancel = useCallback(() => {
    onCancel && onCancel();
  }, [onCancel]);

  //弹窗大小变化回调
  const onModalSizeChange = useCallback((width, height) => {
    setModalHei(height);
  }, []);

  //searchForm大小变化回调
  const onSearchFormSizeChange = useCallback(({ width, height }) => {
    setSearchFormHei(height);
  }, []);

  //grid高度
  const tableHeight = useMemo(() => {
    const headerHeight = showHeader ? BLOCK_HEADER_HEIGHT : 0;
    const diff = MODAL_HEADER_HEIGHT + MODAL_PADDING_HEIGHT * 2 + MODAL_FOOTER_HEIGHT + headerHeight;
    return modalHei - searchFormHei - diff;
  }, [modalHei, searchFormHei, showHeader]);

  useEffect(() => {
    onModalVisibleChange && onModalVisibleChange(visible);
  }, [visible]);

  useEffect(() => {
    if (visible) {
      setDefaultValue();
    } else {
      setSelectedRowKeys([]);
      setSelectedRows([]);
    }
  }, [visible]);

  return (
    <SmartModal
      id="loupeSelectModal"
      wrapClassName={wrapClassName}
      title={title}
      visible={visible}
      zIndex={zIndex}
      minHeight={minHeight}
      minWidth={minWidth}
      itemState={itemState}
      footerLeftExtra={footerLeftExtra}
      footerRightExtra={footerRightExtra}
      confirmLoading={confirmLoading}
      disabled={disabled || disabled == false ? disabled : !selectedRowKeys.length}
      okText={okText}
      cancelText={cancelText}
      onCancel={handlerCancel}
      onOk={handlerOk}
      onSizeChange={onModalSizeChange}
      {...extraModalProps}
    >
      <View
        viewKey={viewKey}
        multiple={multiple}
        value={value}
        tableHeight={tableHeight}
        valueProp={valueProp}
        labelProp={labelProp}
        dataSource={dataSource}
        selectedRowKeys={selectedRowKeys}
        selectedRows={selectedRows}
        rowSelection={rowSelection}
        showHeader={showHeader}
        gridHeaderProps={gridHeaderProps}
        onSelect={handleSelect}
        onCellEditingChange={onCellEditingChange}
        onSizeChange={onSearchFormSizeChange}
        {...restProps}
      />
    </SmartModal>
  );
}

ModalView.defaultProps = {
  value: [],
  title: tr('弹窗标题'),
  itemState: { width: 640, height: 520 },
  loading: false,
  zIndex: 1007,
};

export default ModalView;
